<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>我的动作</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <script src="/js/GetUrlParam.js"></script>
  <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->

  <!--    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
  <link rel="stylesheet" href="/css/global.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
  <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>

<div class="bg"></div>
<div id="app">

  <van-row>
    <van-col span="24">
      <van-nav-bar
        title="查找"
        left-text="返回"
        left-arrow
        right-text="编辑"
        @click-left="onClickLeft"
        @click-right="edit"
      />

    </van-col>
    <van-col span="24">
      <div class="box m-4">
        <div>
          <!--                    <van-image-->
          <!--                            width="100%"-->
          <!--                            fit="cover"-->
          <!--                            src="https://img.yzcdn.cn/vant/cat.jpeg"-->
          <!--                    ></van-image>-->
          <img :src="ModelUnitAndIfo.imgurl" width="100xp"/>
          <p class="size4 mb-2 bold mt-2 pl-3 pr-3" v-model="ModelUnitAndIfo.name">{{ModelUnitAndIfo.name}}</p>
          <p class="size1 color-ash pl-3 pr-3" v-model="ModelUnitAndIfo.fmdescription">
            {{ModelUnitAndIfo.fmdescription}}</p>
          <p class="size1 color-main pl-3 pr-3" v-model="ModelUnitAndIfo.tag">{{ModelUnitAndIfo.tag}}</p>
        </div>
        <div class="p-3">
          <div class="d-flex bg-f9 p-2 size2 mb-2" v-for="ll in ModelUnitAndIfo.list">
            <span class="flex-grow-shrink mr-4">每</span><span>{{ll.unitName}}</span><span class="flex-grow-shrink mr-4">消耗</span>
            <span>{{ll.unitConsumeCalories}}</span><span class="w-100 mr-2">千卡</span>
          </div>
          <!--                    <div class="d-flex bg-f9 p-2 size2 mb-2">-->
          <!--                        <span class="flex-grow-shrink mr-4">每1m消耗</span>-->
          <!--                        <span class="w-100 mr-2">45000千卡</span>-->
          <!--                    </div>-->
        </div>
        <van-field
          id="fat"
          v-model="ModelUnitAndIfo.fat"
          name="脂肪"
          label="脂肪"
          placeholder="单位:g/100g"
          :rules="[{ required: true, message: '请填写食物名称' }]"
        ></van-field>
        <van-field
          id="protein"
          v-model="ModelUnitAndIfo.protein"
          name="蛋白质"
          label="蛋白质"
          placeholder="单位:g/100g"
          :rules="[{ required: true, message: '请填写食物名称' }]"
        ></van-field>
        <van-field
          id="carbohydrate"
          v-model="ModelUnitAndIfo.carbohydrate"
          name="碳水化合物"
          label="碳水化合物"
          placeholder="单位:g/100g"
          :rules="[{ required: true, message: '请填写食物名称' }]"
        ></van-field>
        <div class="pl-3 pr-3 pb-3">
          <p class="color-main size3 mb-2">其他营养素：</p>
          <p class="border size2 p-3" v-model="ModelUnitAndIfo.ortherNutrient">{{ModelUnitAndIfo.ortherNutrient}}</p>
        </div>
        <div class="pl-3 pr-3 pb-3">
          <p class="color-main size3 mb-2">详细描述：</p>
          <p class="border size2 p-3" v-model="ModelUnitAndIfo.ifodescroption">{{ModelUnitAndIfo.ifodescroption}}</p>
        </div>


      </div>
    </van-col>
  </van-row>
</div>
</body>
<script>
  var vm = new Vue({

    el: '#app',
    data() {
      return {
        ModelUnitAndIfo: [
          {
            modelId: '',
            name: '',
            imgurl: '',
            fmdescription: '',
            ifodescroption: '',
            carbohydrate: '',
            protein: '',
            fat: '',
            tag: '',
            ortherNutrient: '',
            list: [
              {
                fUnitId: '',
                unitName: '',
                unitConsumeCalories: '',
              }
            ]
          }
        ]

      };
    },
    mounted: function () {
      //在创建完data实例后还没有渲染组件的时候就会执行这个生命周期函数,将后端接受到的数据填充到data数组中
      //先得到js传过来的参数
      let postdata = {
        foodId: getUrlParam("foodId"),
      }
      console.log(getUrlParam("foodId"));
      axios.post(`/fooduser/selectMUIByMid`, Qs.stringify(postdata))
        .then(res = > {
        console.log("res is=>" + res.data.mui);
      vm.$data.ModelUnitAndIfo = res.data.mui;
      vm.$data.ModelUnitAndIfo.imgurl = "../image/" + res.data.mui.imgurl;
      console.log(vm.$data.ModelUnitAndIfo);
      if (res.data.returnMsg != null)
        alert(res.data.returnMsg.toString());
    }
    )
    },
    methods: {
      edit() {

      },
      onClickLeft() {
        Toast('返回');
      },
    },
  });
</script>
</html>
